<template>
  <div class="xinlv">
    <!-- <div class="inp">
      <div> 用户账号: <input type="text" v-model="form.zhanghao" placeholder="1300000"></div>
      <div>用户昵称: <input type="text" v-model="form.nicheng"></div>
      <div> 平均静息心率: <input type="text" v-model="form.pingjun"></div>
      <div> 静息心率过高: <input type="text" v-model="form.guodi"></div>
      <div> 静息心率过低: <input type="text" v-model="form.guogao"></div>
      <button class="btn" @click='store.add(form)'>添加</button>
    </div> -->
    <div id="main" style="width:100%;height: 400px;"></div>
    <div class="tab">
      <el-table :data="shuju" border style="width: 100%">
        <el-table-column prop="zhanghao" label="用户账号" width="180" />
        <el-table-column prop="nicheng" label="用户昵称" width="180" />
        <el-table-column prop="pingjun" label="平均静息心率" />
        <el-table-column prop="guogao" label="静息心率过高" />
        <el-table-column prop="guodi" label="静息心率过低" />
        <el-table-column prop="guodi" label="操作">
          <template #default="scope">
            <el-button link type="primary" size="small" @click.prevent="chakan(scope.row)">查看</el-button>
            <el-button link type="primary" size="small" @click.prevent="bianji(scope.row)">编辑</el-button>
            <el-button link type="primary" size="small" @click.prevent="deleteRow(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
  
</template>

<script setup>
import * as echarts from 'echarts';
import { push_add } from "../../stores/counter";
import { ref,onMounted } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
// 点击查看跳转路由并且传参

let store = push_add();

let shuju = ref([store.data])

const chakan = (row) => {
  router.push({ path: '/maxindex/compile/', query: { id: JSON.stringify(row) } })
}
const bianji = (row) => {
  router.push({ path: '/maxindex/bianji/', query: { id: JSON.stringify(row) } })
}

// 删除
const deleteRow = (www) => {
  let a = shuju.value.findIndex((item) => {
    return item.zhanghao == www.zhanghao;
    // console.log(www);
  });
  if (a != -1) {
    shuju.value.splice(a, 1);
  }
};
onMounted(() => {
  var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

option = {
  title: {
    text: '心率图',
    subtext: 'Fake Data',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 1048, name: '平均心率' },
        { value: 735, name: '平均精息心率' },
        { value: 580, name: '精息心率过高' },
        { value: 484, name: '精息心率过低' },
        { value: 300, name: '高心率人群' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

option && myChart.setOption(option);

})
</script>

<style lang='scss' scoped>
.btn {
  width: 60px;
  height: 30px;
  border-radius: 15px;
  background-color: aqua;
  color: red;
  border: 1px solid gray;
}

.inp {
  width: 100%;
  height: 90px;
  // background-color: aqua;
  display: flex;
  justify-content: space-around;
  align-items: center;
  input {
    width: 90px;
    height: 30px;
    outline: none;
    border: 1px solid gray;
    text-align: center;
    line-height: 30px;
  }
}
</style>